CSS保健室｜border-image-slice

border-image-slice

border-image-slice 就像忍者一樣，對！沒錯！我太愛拿忍者舉例哈哈哈，它會在圖片上切四刀，形成一個九宮格，保留頭顱和四肢後，再來決定中間的部分要怎麼處理，現在就帶你去了解一下。

border-image-slice 屬性規定圖像邊框的向內偏移。指定 4 個值（ 4 條分割線： top ， right ， bottom ， left ）將 border-image-source 分割成 9 宮格。

所以border-image-slice : 30% 35% 40% 30%;
即是距離圖片上部 30% 的地方，距離右邊 35% ，距離底部 40% ，左邊 30% 的地方各剪裁一下。也就是對圖片進行了四刀切，形成九宮格。

屬性	說明
number	數字值，代表圖像中像素（如果是光柵圖像）或矢量坐標（如果是矢量圖像）。
%	相對於圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。
fill	保留邊框圖像的中間部分。

number 不帶單位， 1 代表 1 個圖片像素。

錯誤寫法

border-image-slice: 30px 30px 30px 30px;

要把單位全部都拿掉如下

border-image-slice: 30 30 30 30;

如果在 border-image-slice 中給出 fill 關鍵字，則中間圖像背景會被保留。

border-image: url(img.png) 27 27 27 27 fill;

如果有 border-image-width / border-image-outset 屬性值， border-image-slice 必須指定數值，否則不合語法，如：

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

如果對背景圖上下左右進行 100% 的切割，即 div 四個角為整張背景圖，由於切割超過 50% ，兩個角之間的背景圖沒有重合部分，所以 border-image 無法進行拉伸。

div{
    width: 300px;
    height: 300px;
    border-width: 50px;
    border-image: url(img.png) 100% round;
    background: #ccc;
}